<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片移动文字重叠</title>
    <link rel="stylesheet" href="css/swiper-4.2.0.min.css" type="text/css">
    <link rel="stylesheet" href="css/animate.css" type="text/css">
    <style type="text/css">
        .swiper-container{
            margin: 0 auto;
            width: 800px;
            height: 330px;
            border: 1px solid blue;

        }
        .img{
            width: 100%;
            height: 100%;
        }
        /*定位分页器*/
        .sp-right{
            position: absolute ;
            left: 30% !important;
            top: 90%;
        }
        /*定位文字div*/
        .ss-p{
            position: absolute;
            width: 100%;
            height: 90px;
            background-color: rgba(0,0,0,0.5);
            bottom: 0;
            color: white;
        }


    </style>
</head>
<body>
<div class="swiper-container">
    <!-- 主体部分 swiper-slide里放需要轮播的东西-->
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="images/bannerbg1.jpg" class="img ani" swiper-animate-effect="swing" swiper-animate-duration="2s" >
            <div class="ss-p">
                <h3>Lorem</h3>
                <p>1</p>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="images/bannerbg2.jpg" class="img ani" swiper-animate-effect="swing" swiper-animate-duration="2s">
            <div class="ss-p">
                <h3>Lorem</h3>
                <p>2</p>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="images/bannerbg3.jpg" class="img ani" swiper-animate-effect="swing" swiper-animate-duration="2s">
            <div class="ss-p">
                <h3>Lorem</h3>
                <p>3</p>
            </div>
        </div>

    </div>
    <!-- 分页器(焦点)-->
    <div class="swiper-pagination sp-right"></div>
</div>

<script src="js/swiper-4.2.0.min.js"></script>
<script src="js/swiper.animate1.0.3.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container',{

        loop:true,  //后复制若干个slide(默认一个)并在合适的时候切换
        effect: 'fade', //slide的切换效果 ,"fade"（淡入）
        speed: 0,//切换速度
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable :true,    //设置为true时，点击指示点会切换

        },
        on:{
            init: function(){
//                swiperAnimateCache(this); //隐藏动画元素
//                swiperAnimate(this); //初始化完成开始动画
            },
            slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            }
        },
    });

</script>
</body>
</html>